<!--

    Copyright (c) 2010-2025 Eclipse Dirigible contributors

    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v2.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v20.html

    SPDX-FileCopyrightText: Eclipse Dirigible contributors
    SPDX-License-Identifier: EPL-2.0

-->
<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="process-instances" ng-controller="BpmProcessInstancesView">

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" sizes="any" href="data:;base64,iVBORw0KGgo=">
        <title config-title></title>
        <script type="text/javascript" src="/services/web/perspective-processes/configs/bpm-process-instances-view.js"></script>
        <script type="text/javascript" src="/services/js/platform-core/services/loader.js?id=view-js"></script>
        <link type="text/css" rel="stylesheet" href="/services/js/platform-core/services/loader.js?id=view-css" />
        <script type="text/javascript" src="/services/web/perspective-processes/js/time-utils.js"></script>
        <script type="text/javascript" src="/services/web/perspective-processes/views/js/bpm-process-instances.js"></script>
        <style>
            .combo-toolbar {
                --sapElement_Height: 2rem;
            }

            .combo-toolbar .fd-select,
            .combo-toolbar .fd-select>button,
            .combo-toolbar .fd-input-group {
                margin-block: 0;
                border: transparent;
                border-radius: 0;
            }

            .combo-toolbar .fd-select>button {
                gap: .5rem;
            }

        </style>
    </head>

    <body class="bk-vbox">
        <bk-busy-indicator-extended class="bk-fill-parent" ng-hide="!state.isBusy" size="l">Loading...</bk-busy-indicator-extended>
        <bk-toolbar compact="true" ng-show="!state.isBusy">
            <bk-toolbar-spacer></bk-toolbar-spacer>
            <bk-button state="transparent" glyph="sap-icon--refresh" title="Refresh" aria-label="Refresh" ng-click="reload()"></bk-button>
            <bk-toolbar-separator></bk-toolbar-separator>
            <bk-button state="transparent" toggled="displaySearch" glyph="sap-icon--search" title="Toggle search" aria-label="Toggle search" ng-click="toggleSearch()"></bk-button>
            <bk-toolbar-separator></bk-toolbar-separator>
            <bk-button state="transparent" glyph="sap-icon--play" title="Start" aria-label="Start" ng-click="start()"></bk-button>
            <bk-toolbar-separator></bk-toolbar-separator>
            <bk-button state="transparent" ng-disabled="selected.instanceId === null" glyph="sap-icon--restart" title="Retry" aria-label="Retry" ng-click="retry()"></bk-button>
            <bk-toolbar-separator></bk-toolbar-separator>
            <bk-button state="transparent" ng-disabled="selected.instanceId === null" glyph="sap-icon--process" title="Skip" aria-label="Skip" ng-click="skip()"></bk-button>
        </bk-toolbar>
        <div class="bk-hbox combo-toolbar" ng-show="!state.isBusy">
            <bk-combobox-input class="bk-full-width bk-border--right" dropdown-items="definitionsList" ng-model="selected.definitionKey" ng-change="definitionSelected()" placeholder="Definitions"
                btn-aria-label="show/hide definition options" list-aria-label="definition options">
            </bk-combobox-input>
            <bk-select title="Definition versions" placeholder="Versions" style="max-width: auto;" ng-model="selected.definitionId" ng-change="versionSelected()">
                <bk-option ng-repeat="ver in definitionVersions track by ver.id" text="{{ver.label}}" value="ver.id"></bk-option>
            </bk-select>
        </div>
        <bk-toolbar ng-if="displaySearch && !state.isBusy" compact="true">
            <bk-input-group>
                <bk-input type="search" placeholder="Search by Business Key" ng-keyup="inputSearchKeyUp($event)" ng-model="searchField.text" bk-focus="true"></bk-input>
                <bk-input-group-addon>
                    <bk-button glyph="sap-icon--search" aria-label="search" ng-click="search()"></bk-button>
                </bk-input-group-addon>
            </bk-input-group>
        </bk-toolbar>
        <bk-scrollbar class="bk-fill-parent" ng-show="!state.isBusy">
            <table bk-table outer-borders="horizontal" display-mode="compact">
                <thead bk-table-header sticky="true" interactive="false">
                    <tr bk-table-row>
                        <th bk-table-header-cell>Id</th>
                        <th bk-table-header-cell>Business Key</th>
                        <th bk-table-header-cell>Start Time</th>
                        <th bk-table-header-cell></th>
                    </tr>
                </thead>
                <tbody bk-table-body>
                    <tr bk-table-row ng-repeat="next in instancesList track by next.id" ng-if="next.processDefinitionVersion === selected.definitionVersion" hoverable="true" activable="true" selected="selected.instanceId === next.id"
                        ng-click="selectionChanged(next)">
                        <td bk-table-cell>{{next.id}}</td>
                        <td bk-table-cell class="bk-text--ellipsis" style="max-width: 5rem; overflow: hidden; white-space: nowrap;">{{next.businessKey}}</td>
                        <td bk-table-cell>{{getRelativeTime(next.startTime)}}</td>
                        <td bk-table-cell fit-content="true">
                            <bk-button state="transparent" glyph="sap-icon--show" title="Show details" aria-label="Show details" ng-click="openDialog(next)"></bk-button>
                        </td>
                    </tr>
                    <tr ng-if="instancesList.length === 0" bk-table-row>
                        <td bk-table-cell no-data="true">{{getNoDataMessage()}}</td>
                    </tr>
                </tbody>
            </table>
        </bk-scrollbar>
        <bk-pagination ng-if="totalRows > 0 && !state.isBusy" current-page="currentPage" total-items="totalRows" items-per-page="pageSize" items-per-page-options="[10, 20, 50, 100]" items-per-page-placement="top-start"
            display-total-items="true" compact="true" page-change="onPageChange(pageNumber)" items-per-page-change="onItemsPerPageChange(itemsPerPage)">
        </bk-pagination>
        <theme></theme>
    </body>

</html>
